<template>
  <el-card class="user">
    <template #header>
      <div class="user-header">
        <span>用户管理页面</span>
        <el-input
          v-model="params.keyword"
          placeholder="请输入用户名进行查询"
          clearable
          style="width:240px"
          @clear="getList"
        >
          <template #append>
            <div
              class="iconfont icon-search user-search"
              @click="onSearch"
            ></div>
          </template>
        </el-input>
      </div>
    </template>
    <ev-table
      :data="tableData"
      :table-config="config.tableConfig"
      :pag-config="params"
    >
      <template #sex="scope">
        <span>{{ translateSex(scope.row.sex) }}</span>
      </template>
    </ev-table>
  </el-card>
</template>

<script lang='ts' setup name="userManage">
import api from './service/api'
import config from './config/index'
import { reactive, toRefs, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import commonApi from '@/api/common/index'
interface dict{
  dictType:string,
  dictTypeChdesc:string,
  value: string|number,
  label: string,
  orderNum: number,
  description: string,
  id?:number
}
const params = reactive({
    pageNumber: 1,
    pageSize: 10,
    keyword: '',
    total: 0,
    show: true,
})
const tableData = ref([])
const onSearch = () => {
    params.pageNumber = 1
    getList()
}
const sexList = reactive<dict[]>([])
const getList = () => {
    api.getUserList(params)
    .then(res => {
        const { code, data, msg } = res
        if (code == 0) {
            tableData.value = data.data
            params.total = data.pagination.total
        } else {
            this.$message.error(msg)
        }
    })
}
commonApi.getDict('sex')
.then(res => {
    const { code, data, msg } = res
    if (code == 0) {
        Object.assign(sexList, data)
    } else {
        ElMessage.error(msg)
    }
})

const translateSex = (value:string) => {
    const data = sexList.find(e => e.value == value)
    if (data) {
        return data.label
    }
    return '-'
}
onMounted(() => {
    getList()
})
</script>
<style scoped lang='scss'>
.user{
  .user-header{
    display: flex;
    justify-content: space-between;
    .user-search{
      cursor: pointer;
    }
  }

}
</style>